<template>
  <div class="copyBox" @click="copyBtn()">
    <span class="copy" :data-clipboard-target="id" :style="{height:height+'px','margin-top':top+'px','line-height':height+30+'px','font-size':size+'px'}">{{text}}</span>
  </div>
</template>
<script>
  import Vue from "vue";
  import { XHeader } from 'vux'
  import tips from '../../service/tips.js'
  var Clipboard = require("clipboard/dist/clipboard.min.js");
  var clipboard = new Clipboard('.copy');
  export default {
    props: ["type", "value", "text", "width", "top", "height", 'id', 'size'],
    data: function () {
      return {

      }
    },
    methods: {
      copyBtn() {
        if (!window.localStorage.getItem('login.username')) {
          tips.tips('您未登录');
          this.$router.push({ path: '/login' })
          return false
        }
        clipboard.on('success', (e) => {
          tips.tips("复制成功");
        });
        clipboard.on('error', (e) => {
          tips.tips("复制失败");
        });
      },
    },
    components: {
      XHeader,
    }
  }
</script>
<style lang="less" scoped>
  .copy {
    display: block;
  }
</style>